<template>
  <!--官网视频介绍  更多视频页面 -->
  <div class="main">
    <div class="shipin-page">
      <div class="navbar">
        <Header></Header>
        <div class="shipin-box" v-if="videoList&&videoList.length" v-loading="loading" element-loading-text="查询中..." element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0,0, 0.8)">
            <div class="line-box">
              <el-button type="primary" @click="goback">返回</el-button>
              <div class="title flex">
                <div class="tit">{{isSHowType[currentType].name}}</div>
              </div>
              <div class="video_row flex">
                <div class="item" v-for="item in videoList" :key="item.id">
                  <videoVue :videoInfo="item" @clickitem="clickItem"></videoVue>
                </div>
              </div>
            </div>
        </div>
        <div class="shipin-box" style="font-size:22px;text-align:center;line-height:200px" v-else>暂无视频教程</div>
      </div>
    </div>

    <!-- 底部 -->
    <Footer></Footer>

  </div>
</template>
  
  <script>
import Header from "../../../components/ConsignmentFourzero/header.vue";
import Footer from "../../../components/ConsignmentFourzero/footer.vue";
import resourcesManage from "@/api/PCWebImages/resourcesManage";

import videoVue from "./videoItem.vue"
export default {
  components: {
    Header,
    Footer,
    videoVue
  },
  data() {
    return {
      loading: false,
      videoList: {},
      isShowVideo: false,
      isSHowType:{
        1:{
          name: "推荐工具",
        },
        2:{
          name: "指导文章",
        },
        3:{
          name: "教学视频",
        }
      },
      currentType:''
    };
  },
  created() {
   
  },
  watch:{
    $route: {
      handler(route){
        if(route.path=='/videoPage'&& route.query.type&&this.currentType != route.query.type){
          this.currentType = route.query.type
          this.getList();
        }
      },
      immediate:true,
      deep:true
    }
  },
  methods: {
    goback(){
      window.history.go(-1)
    },
    clickItem(item) {
      console.log("%c Line:73 🍑 item", "color:#42b983", item);
      if (item.type == 1 || item.type == 3) {
        this.$router.push({
          path: "/videoPlay",
          query: {
            id: item.id,
          },
        });
      } else {
        if (item.pcJump.indexOf("http") > -1) {
          window.open(item.pcJump, "_blank");
        } else {
          this.$router.push({
            path: item.pcJump,
          });
        }
      }
    },
    getList() {
      this.loading = true;
      let obj = {
        systemType: 2,
      };
      resourcesManage
        .getListweb(obj)
        .then((res) => {
          this.loading = false;
          this.videoList = [];
          if (res.rows && res.rows.length) {
            res.rows.forEach((r) => {
              if (r.type == this.currentType) {
                this.videoList.push(r);
              }
            });
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    }
  },
};
</script>
  
  <style lang="scss" scoped>
.main {
  width: 100%;
  background-color: #000;
}
.shipin-page {
  .navbar {
    width: 1200px;
    margin: 0 auto;
  }

  .shipin-box {
    color: #fff;
    // background-color: #303650;
    background: linear-gradient(180deg, #070a20 0%, #6e7796 100%);
    padding: 20px;
    .title {
      justify-content: space-between;
      align-items: center;
      padding: 15px 0;
      .tit {
        font-size: 20px;
        font-weight: bold;
      }
      .more {
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 3px;
      }
    }
    .video_row {
      flex-wrap: wrap;
      .item {
        width: 270px;
        margin-right: 15px;
        margin-bottom: 20px;
        &:nth-of-type(4n) {
          margin-right: 0;
        }
      }
    }
  }
}
</style>